<template>
<div>用户列表
  <!--面包屑导航-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!--用户列表主题-->
  <el-card>
    <el-row :gutter="145">
      <el-col :span="12">
    <el-input placeholder="请输入内容" v-model="queryInfo.username" clearable @clear="getUserList()">
      <el-button  slot="append" icon="el-icon-search" @click="getUserList"></el-button>
    </el-input>
      </el-col>
      <el-col :span="4">
    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
      </el-col>
    </el-row>
    <el-table :data="userList" border stripe>
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>
      <el-table-column prop="state" label="状态">
        <!--作用域插槽-->
        <template slot-scope="scope">
          <!--{{scope.row.state}} 取除state的值 true or false-->
          <!--{{scope.row}} 意思为取出每行的值-->
          <el-switch v-model="scope.row.state" @change="changeUserState(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">

          <el-tooltip effect="dark" content="修改" placement="top-start" :enterable="false">
            <!--修改-->
            <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row.id)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false" >
            <!--删除-->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false">
            <!--分配权限-->
            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </el-card>
  <!--addUser-->
  <el-dialog
      title="新增用户"
      :visible.sync="dialogVisible"
      width="40%"
      @close="addDialogClosed">
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser()">确 定</el-button>
  </span>
  </el-dialog>
  <el-dialog
      title="修改用户"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClosed">
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
      <el-form-item label="用户名" prop="username" >
        <el-input v-model="editForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="editForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUser()">确 定</el-button>
  </span>
  </el-dialog>


</div>
</template>

<script>
export default {
  name: "UserList.vue",
  created() {
    this.getUserList();
  },
  methods:{
    // 获取所用用户
    async getUserList(){
      const {data:res} = await this.$http.get("getUserList",{params:this.queryInfo});
     this.userList = res.data;
     this.total = res.numbers;
    },
    handleSizeChange(newSize){
      this.queryInfo.pageSize=newSize;
      this.getUserList();
    },
    handleCurrentChange(newPage){
      this.queryInfo.pageNum = newPage;
      this.getUserList();
    },
    // 修改用户状态
    async changeUserState(userInfo){
      const {data:res} = await this.$http.get("changeUserState?id="+ userInfo.id + "&state=" + userInfo.state);
      console.log(res);
      if (res=="success"){
        userInfo.id = !userInfo.id;
        return this.$message.success("操作成功")
      }else {
        this.$message.success("操作失败");
      }
    },
    addDialogClosed(){
      this.$refs.addFormRef.resetFields();
    },
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },


    // 新增用户
     addUser(){
      this.$refs.addFormRef.validate(async valid=>{
        if (!valid){
          return this.$message.error("请使用规范")
        }
        const {data:res} = await this.$http.post("addUser",this.addForm);
        console.log(res)
        if (res!="success"){
          return this.$message.error("操作失败");
        }
        this.$message.success("操作成功")
        this.dialogVisible = false;
        await this.getUserList();
      })
    },
    // 修改用户
    editUser(){
      this.$refs.editFormRef.validate(async valid=>{
        if (!valid){
          return this.$message.error("请使用规范")
        }
        const {data:res} = await this.$http.post("updateUser",this.editForm)
        if (res!="success"){
          return this.$message.error("操作失败")
        }
        this.$message.success("操作成功")
        this.editDialogVisible = false;
        await this.getUserList();
      })
    },

    async deleteUser(id ) {
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch( err=>err);
      if (confirmResult!='confirm'){
        return this.$message.info("已经取消删除")
      }
      const {data:res} = await this.$http.post("deleteUser?id="+id);
      if (res=="success"){
        this.$message.success("删除成功");
      }
      await this.getUserList();
    },
    async showEditDialog(id){
      const {data:res} = await this.$http.post("getUserById?id="+id);
        this.editForm = res;
        this.editDialogVisible = true
    }

  },

  data(){
    return{
      // 查询信息实体
      queryInfo: {
        username: "",
        pageNum: 1,
        pageSize: 5
      },
      userList:[], // 用户列表
      total:0, // 总记录数
      dialogVisible: false,
      addForm:{
        username:'',
        password:'',
        email:'',
      },
      addFormRules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 5 ~ 12 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码为必填项', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 ~ 10 个字符', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '邮箱为必填项', trigger: 'blur' },
          { min: 10, max: 20, message: '长度在 6 ~ 10 个字符', trigger: 'blur' },
        ]
      },
      editDialogVisible:false,
      editForm:{
        password:'',
        email:'',
      },
      editFormRules:{
        password: [
          { required: true, message: '密码为必填项', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 ~ 10 个字符', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '邮箱为必填项', trigger: 'blur' },
          { min: 10, max: 20, message: '长度在 6 ~ 10 个字符', trigger: 'blur' },
        ]
      },
    }
  },
}
</script>

<style scoped>
.el-breadcrumb{
  margin-bottom: 15px;
  font-size: 12px;
}
</style>